<template>
    <div class="box">
        <div class="active">
            <h4 class="name">
                <span>企业荣誉</span>
            </h4>
            <div class="btn">
                <a-button icon="plus" @click="visibleHonor = true"> 添加 </a-button>
            </div>
            <ul>
                <li v-for="(item, index) in list.honor" :key="index">
                    <img :src="$staticUrl + item.img" @click="imgShow(item.img)" alt="" />
                    <div class="action">
                        <a-button type="link" @click="handleEditHonor(item)">
                            <img src="@/assets/images/login/edit.png" alt="" />
                            <img src="@/assets/images/login/edit_hover.png" alt="" />
                        </a-button>
                        <a-button type="link" @click="deleteItem(item)">
                            <img src="@/assets/images/login/del.png" alt="" />
                            <img src="@/assets/images/login/del_hover.png" alt="" />
                        </a-button>
                    </div>
                </li>
            </ul>
        </div>
        <div class="active">
            <h4 class="name">
                <span>相关资质</span>
            </h4>
            <div class="btn">
                <a-button icon="plus" @click="visible = true">添加</a-button>
            </div>
            <ul>
                <li v-for="(item, index) in list.certification" :key="index">
                    <img :src="$staticUrl + item.img" @click="imgShow(item.img)" alt="" />
                    <div class="action">
                        <a-button type="link" @click="handleCertif(item)">
                            <img src="@/assets/images/login/edit.png" alt="" />
                            <img src="@/assets/images/login/edit_hover.png" alt="" />
                        </a-button>
                        <a-button type="link" @click="deleteItem(item)">
                            <img src="@/assets/images/login/del.png" alt="" />
                            <img src="@/assets/images/login/del_hover.png" alt="" />
                        </a-button>
                    </div>
                </li>
            </ul>
        </div>
        <a-modal
            v-model="visible"
            :title="Title"
            ok-text="确认"
            :destroyOnClose="true"
            cancel-text="取消"
            class="model-mask"
            @ok="handleSavecertifForm"
            @cancel="closecertifForm"
        >
            <a-form-model
                ref="certifForm"
                :model="certifForm"
                :rules="certifRules"
                :labelCol="{ style: 'width: 130px' }"
            >
                <a-form-model-item label="企业资质名称" prop="name">
                    <a-input v-model="certifForm.name" placeholder="请填写企业资质名称" autocomplete="off" />
                </a-form-model-item>
                <a-form-model-item label="资质有效期" prop="termDate" extra="若证件无有效期限制，请勾选长期">
                    <a-radio-group name="radioGroup" v-model="certifForm.termType">
                        <a-radio :value="1"></a-radio>
                        <a-date-picker
                            v-model="certifForm.termDate"
                            format="YYYY-MM-DD"
                            valueFormat="YYYY-MM-DD"
                            placeholder="请选择时间"
                            :show-today="false"
                        />
                        <a-radio :value="2"> 长期 </a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item
                    label="企业资质图片"
                    prop="img"
                    extra="支持上传jpe、jpeg、png,大小不超过6M,尺寸为400*262"
                >
                    <custom-cropper-image
                        :width="400"
                        :height="262"
                        :path="path"
                        v-model="certifForm.img"
                        :max="1"
                        :fileSize="6"
                        keys="资质"
                    ></custom-cropper-image>
                </a-form-model-item>
                <a-form-model-item
                    label="企业资质可查网址"
                    extra="因经营许可证为非全国同意颁发,查验较为繁琐,提供可查验网址，可提升审核通过速度"
                >
                    <a-input v-model="certifForm.verifyUrl" autocomplete="off" placeholder="请填写网址" />
                </a-form-model-item>
            </a-form-model>
        </a-modal>
        <a-modal
            v-model="visibleHonor"
            :title="HonorTitle"
            :destroyOnClose="true"
            ok-text="确认"
            cancel-text="取消"
            class="model-mask"
            @ok="handleSaveHonorForm"
            @cancel="closeHonorForm"
        >
            <a-form-model ref="HonorForm" :model="HonorForm" :rules="HonorRules">
                <a-form-model-item label="证书" prop="name">
                    <a-input v-model="HonorForm.name" placeholder="请填写证书" autocomplete="off" />
                </a-form-model-item>
                <a-form-model-item label="有效期" prop="termDate">
                    <a-radio-group name="radioGroup" v-model="HonorForm.termType">
                        <a-radio :value="1"></a-radio>
                        <a-date-picker
                            v-model="HonorForm.termDate"
                            format="YYYY-MM-DD"
                            valueFormat="YYYY-MM-DD"
                            placeholder="请选择时间"
                            :show-today="false"
                        />
                        <a-radio :value="2"> 长期 </a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item
                    label="证书图片"
                    prop="img"
                    extra="支持上传jpe、jpeg、png,大小不超过6M,尺寸为400*262"
                >
                    <custom-cropper-image
                        :width="400"
                        :height="262"
                        :path="path"
                        v-model="HonorForm.img"
                        :fileSize="6"
                        keys="荣誉"
                    ></custom-cropper-image>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>

<script>
export default {
    data () {
        return {
            typeList: ['image/jpeg', 'image/png', 'image/bmp', 'image/gif'],
            path: '/company-certification/img/',
            list: {
                certification: [],
                honor: []
            },
            visibleHonor: false,
            visible: false,
            HonorTitle: '添加企业荣誉',
            Title: '添加企业资质',
            HonorForm: {
                name: '',
                termType: '',
                termDate: null,
                img: []
            },
            certifForm: {
                name: '',
                termType: '',
                termDate: null,
                img: [],
                verifyUrl: ''
            },
            itemHonorID: '',
            itemcertifID: ''
        }
    },
    computed: {
        HonorRules () {
            let rule = {}
            if (this.HonorForm.termType === 1) {
                rule = {
                    name: [
                        {
                            required: true,
                            message: '请填写证书名称',
                            trigger: 'blur'
                        }
                    ],
                    img: [
                        {
                            required: true,
                            message: '请上传图片',
                            trigger: 'change'
                        }
                    ],
                    termDate: [
                        {
                            required: true,
                            message: '请选择有效期'
                        }
                    ]
                }
            } else {
                if (this.$refs.HonorForm) {
                    this.$refs.HonorForm.clearValidate('termDate')
                }
                rule = {
                    name: [
                        {
                            required: true,
                            message: '请填写证书名称',
                            trigger: 'blur'
                        }
                    ],
                    img: [
                        {
                            required: true,
                            message: '请上传图片',
                            trigger: 'change'
                        }
                    ],
                    termDate: [{ required: false, message: '请选择有效期' }]
                }
            }
            return rule
        },
        certifRules () {
            let rule = {}
            if (this.certifForm.termType === 1) {
                rule = {
                    name: [
                        {
                            required: true,
                            message: '请填写证书名称',
                            trigger: 'blur'
                        }
                    ],
                    img: [
                        {
                            required: true,
                            message: '请上传图片',
                            trigger: 'change'
                        }
                    ],
                    termDate: [
                        {
                            required: true,
                            message: '请选择有效期',
                            trigger: 'change'
                        }
                    ]
                }
            } else {
                if (this.$refs.certifForm) {
                    this.$refs.certifForm.clearValidate('termDate')
                }
                rule = {
                    name: [
                        {
                            required: true,
                            message: '请填写证书名称',
                            trigger: 'blur'
                        }
                    ],
                    img: [
                        {
                            required: true,
                            message: '请上传图片',
                            trigger: 'change'
                        }
                    ],
                    termDate: [
                        {
                            required: false,
                            message: '请选择有效期',
                            trigger: 'change'
                        }
                    ]
                }
            }
            return rule
        }
    },
    watch: {
        'certifForm.termDate' (val) {
            if (val) {
                this.certifForm.termType = 1
            }
        },
        'certifForm.termType' (val) {
            if (val === 2) {
                this.certifForm.termDate = null
            }
        },
        'HonorForm.termDate' (val) {
            if (val) {
                this.HonorForm.termType = 1
            }
        },
        'HonorForm.termType' (val) {
            if (val === 2) {
                this.HonorForm.termDate = null
            }
        }
    },
    mounted () {
        this.getDataList()
    },
    methods: {
        imgShow (url) {
            if (url.length) {
                const urls = url.split(',')
                this.$picturesModal({
                    urls
                })
            }
        },
        async getDataList () {
            const res = await this.$ApiServer['company/honor/list']()
            if (res.code === 200) {
                this.list = res.data
            }
        },
        async deleteItem (item) {
            const res = await this.$ApiServer['company/honor/delete']({
                id: item.id
            })
            if (res.code === 200) {
                this.$message.success('删除成功')
                this.getDataList()
            } else {
                this.$message.error(res.message)
            }
        },
        handleSaveHonorForm () {
            this.$refs.HonorForm.validate((valid) => {
                if (valid) {
                    const { name, termDate, termType } = this.HonorForm
                    this.$ApiServer['company/honor/keep']({
                        name,
                        termDate,
                        termType,
                        type: 1,
                        img: this.HonorForm.img.toString(),
                        id: this.itemHonorID
                    }).then((res) => {
                        if (res.code === 200) {
                            this.$message.success('操作成功')
                            this.closeHonorForm()
                            this.getDataList()
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                } else {
                    return false
                }
            })
        },
        handleSavecertifForm () {
            this.$refs.certifForm.validate((valid) => {
                if (valid) {
                    const { name, termDate, termType, verifyUrl } = this.certifForm
                    this.$ApiServer['company/honor/keep']({
                        name,
                        termDate,
                        termType,
                        type: 2,
                        verifyUrl,
                        img: this.certifForm.img.toString(),
                        id: this.itemcertifID
                    }).then((res) => {
                        if (res.code === 200) {
                            this.$message.success('操作成功')
                            this.closecertifForm()
                            this.getDataList()
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                } else {
                    return false
                }
            })
        },
        handleEditHonor (item) {
            this.itemHonorID = item.id
            this.HonorForm.name = item.name
            this.HonorForm.termType = item.termType
            this.HonorForm.termDate = Number(item.termType) === 1 ? item.termDate : ''
            this.HonorForm.img = item.img.split(',')
            this.visibleHonor = true
            this.HonorTitle = '编辑企业荣誉'
        },
        handleCertif (item) {
            this.itemcertifID = item.id
            this.certifForm.name = item.name
            this.certifForm.termType = item.termType
            this.certifForm.termDate = Number(item.termType) === 1 ? item.termDate : ''
            this.certifForm.verifyUrl = item.verifyUrl
            this.certifForm.img = item.img.split(',')
            this.visible = true
            this.Title = '编辑企业资质'
        },
        closeHonorForm () {
            this.visibleHonor = false
            this.itemHonorID = ''
            this.$refs.HonorForm.resetFields()
            this.HonorForm.termType = ''
            this.HonorTitle = '添加企业荣誉'
            this.HonorForm.name = ''
            this.HonorForm.termType = ''
            this.HonorForm.termDate = null
            this.HonorForm.img = []
        },
        closecertifForm () {
            this.visible = false
            this.itemcertifID = ''
            this.$refs.certifForm.resetFields()
            this.certifForm.termType = ''
            this.HonorTitle = '添加企业资质'
            this.certifForm.name = ''
            this.certifForm.termType = ''
            this.certifForm.termDate = null
            this.certifForm.img = []
            this.certifForm.verifyUrl = ''
        }
    }
}
</script>

<style lang="less" scoped>
.box {
    background: #fff;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-top: 0.1rem;
    .active {
        .name {
            padding-left: 0.2rem;
            height: 0.6rem;
            background: #ddf7e9;
            display: flex;
            align-items: center;
            span {
                font-size: 0.18rem;
                color: #333333;
                margin-right: 0.3rem;
            }
            button {
                height: 0.4rem;
                width: 1rem;
                background: @primary-color;
                color: #ffffff;
                font-size: 0.16rem;
                display: flex;
                justify-content: center;
                align-items: center;
                &:hover {
                    border: none;
                }
            }
        }
        ul {
            display: flex;
            flex-wrap: wrap;
            padding: 0.2rem;
            li {
                width: calc((100% - 2rem) / 5);
                height: calc(2.6rem);
                border-radius: 0.02rem;
                margin-left: 0.5rem;
                position: relative;
                border: 1px solid #666666;
                box-sizing: border-box;
                img {
                    width: 100%;
                    height: 2.6rem;
                    cursor: pointer;
                    object-fit: cover;
                }
                .action {
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                    width: 100%;
                    height: 0.4rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: rgba(255, 255, 255, 0.6);
                    button {
                        padding: 0;
                        font-size: 0.16rem;
                        color: #999999;
                        &:hover {
                            color: @primary-color;
                        }
                        & + button {
                            margin-left: 0.6rem;
                        }
                    }
                }
                &:nth-child(n + 6) {
                    margin-top: 0.5rem;
                }
                &:nth-child(5n + 1) {
                    margin-left: 0;
                }
            }
        }
        .btn {
            padding-top: 0.1rem;
            padding-left: 0.2rem;
            button {
                background: #009944;
                color: #fff;
            }
        }
    }
}
.model-mask {
    ::v-deep {
        .ant-form {
            .ant-form-item {
                display: flex;
                .ant-form-item-label {
                    // width: 1rem;
                    text-align: right;
                    flex-shrink: 0;
                }
                .ant-calendar-picker {
                    margin-right: 0.2rem;
                }
                .ant-upload.ant-upload-select.ant-upload-select-picture-card {
                    width: 1.8rem;
                    height: 1.2rem;
                    background-color: #ffffff;
                    border-color: #d4d4d4;
                    border-style: solid;
                    &:hover {
                        border-color: @primary-color;
                        border-style: solid;
                        .anticon-cloud-upload svg {
                            color: @primary-color;
                        }
                        .ant-upload-text {
                            color: @primary-color;
                        }
                    }
                    .anticon-cloud-upload svg {
                        width: 0.42rem;
                        height: 0.3rem;
                        color: #999999;
                    }
                    .ant-upload-text {
                        color: #999999;
                        font-size: 0.14rem;
                    }
                }
                .ant-upload-list-picture-card-container {
                    width: 1.8rem;
                    height: 1.2rem;
                }
                .ant-upload-list-picture-card .ant-upload-list-item {
                    width: 1.8rem;
                    height: 1.2rem;
                }
            }
        }
    }
}

.action {
    ::v-deep {
        img {
            width: auto !important;
            height: 16px !important;
        }
        img:nth-child(1) {
            display: inline-block;
        }
        img:nth-child(2) {
            display: none;
        }
    }
    button:hover {
        ::v-deep {
            img:nth-child(1) {
                display: none;
            }
            img:nth-child(2) {
                display: inline-block;
            }
        }
    }
}
</style>
